<template>
  <!-- 画线 -->
  <div class="form">
    <div class="inputBox">
      <label for="">端点1</label>
      <input type="text" v-model="x1" />
      <input type="text" v-model="y1" />
    </div>
    <div class="inputBox">
      <label for="">端点2</label>
      <input type="text" v-model="x2" />
      <input type="text" v-model="y2" />
    </div>
    <div class="inputBox">
      <label for="">strokeColor</label>
      <input type="color" name="" id="" v-model="stroke" />
    </div>
    <div class="inputBox">
      <label for="">strokeWidth</label>
      <input type="text" name="" v-model="strokeWidth" />
    </div>
    <div class="inputBox">
      <button @click="addLine">addLine</button>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, toRaw } from "vue";
import * as d3 from "d3";
import { lineDrawAdd } from "../../util/geoDrawAdd.js";

export default {
  setup() {
    let line = reactive({
      x1: 11,
      y1: 11,
      x2: 11,
      y2: 111,
      stroke: "#000",
      strokeWidth: 2,
    });

    function addLine() {
      const geo = {};
      Object.assign(geo, toRaw(line));
      lineDrawAdd(geo);
    }

    return { ...toRefs(line), addLine };
  },
};
</script>